<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>item</title>
    <link rel="StyleSheet" href="../css/catalog.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
    <script src="/js/jquery-3.6.0.min.js"></script>
<!--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
</head>
<body>
<div th:replace="common/top1"></div>
<div id="w">
    <div id="BackLink">
        <a th:href="@{/productForm(productId=${product.productid})}" th:text="' Return to ' + ${product.productid}">
            Return to ${sessionScope.product.productId}
        </a>
    </div>
        <div id="itemContent">
            <div class="content" id="popLayer" style="text-align: center;background-color: #ffffff;">
                <span class="cartMsg">提示:成功加入购物车!</span>
            </div>
            <div class="content" th:if="${errorMsg != null}" id="errorMsg1" style="text-align: center;background-color: #ffffff;">
                <span class="cartMsg"  th:text="${errorMsg}"></span>
            </div>
<!--            <div id="tableContent">-->
                <table class="showItemTable">
                    <tr>
                        <td class="showItem" ><img th:src="${product.descn}">
                            <span th:if="${!#strings.isEmpty(item.attr1)}" th:text="${item.attr1}"> </span>
                            <span th:if="${!#strings.isEmpty(item.attr2)}"> </span>
                            <span th:if="${!#strings.isEmpty(item.attr2)}" th:text=" ' ' + ${item.attr2}"> </span>
                            <span th:if="${!#strings.isEmpty(item.attr3)}" th:text=" ' ' + ${item.attr3}"> </span>
                            <span th:if="${!#strings.isEmpty(item.attr4)}" th:text=" ' ' + ${item.attr4}"> </span>
                            <span th:if="${!#strings.isEmpty(item.attr5)}" th:text=" ' ' + ${item.attr5}"> </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="showItem" th:text=" ${item.itemid}">Name</td>
                    </tr>
                    <tr>
                        <td class="showItem" th:text="${product.name}">product.name</td>
                    </tr>
                    <tr>
                        <td class="showItem" th:text="'$' + ${item.listprice}">price</td>
                    </tr>
                    <tr>
                        <td class="showItem" th:text="' 库存：' + ${item.qty}">qty</td>
                    </tr>
                    <tr>
                        <td id="itemButtonContent">
                            <a id="addLinkLeft" th:onclick="add([[${item.itemid}]]);" class="Button">Add to Cart</a>
                            <a id="addLinkRight" th:href="@{/user/buyItem(itemId=${item.itemid})}" class="Button">Buy Now</a>
                        </td>
                    </tr>

                </table>
<!--            </div>-->
        </div>
</div>
<!--<table>-->
<!--    <tr>-->
<!--        <td>${sessionScope.product.description}</td>-->
<!--    </tr>-->
<!--    <tr>-->
<!--        <td><b> ${sessionScope.item.itemId} </b></td>-->
<!--    </tr>-->
<!--    <tr>-->
<!--        <td><b><font size="4">-->
<!--            ${sessionScope.item.attribute1}-->
<!--            ${sessionScope.item.attribute2} ${sessionScope.item.attribute3}-->
<!--            ${sessionScope.item.attribute4} ${sessionScope.item.attribute5}-->
<!--            ${sessionScope.product.name}-->
<!--        </font></b></td>-->
<!--    </tr>-->
<!--    <tr>-->
<!--        <td>${sessionScope.product.name}</td>-->
<!--    </tr>-->
<!--    <tr>-->
<!--        <td>-->
<!--            <c:if test="${sessionScope.item.quantity <= 0}">-->
<!--                Back ordered.-->
<!--            </c:if>-->
<!--            <c:if test="${sessionScope.item.quantity > 0}">-->
<!--                ${sessionScope.item.quantity} in stock.-->
<!--            </c:if>-->
<!--        </td>-->
<!--    </tr>-->
<!--    <tr>-->
<!--        <td><fmt:formatNumber value="${sessionScope.item.listPrice}" pattern="$#,##0.00" /></td>-->
<!--    </tr>-->

<!--    <tr>-->
<!--        <td>-->
<!--            <%&#45;&#45;                <a href="addItemToCart?workingItemId=${sessionScope.item.itemId}toke=${sessionScope.token}"&#45;&#45;%>-->
<!--            <%&#45;&#45;                 class="Button">Add to Cart</a>&#45;&#45;%>-->

<!--            <a href="addItemToCart?workingItemId=${sessionScope.item.itemId}&token=${sessionScope.token}" class="Button">Add to Cart</a>-->
<!--        </td>-->
<!--    </tr>-->
<!--</table>-->
<div th:replace="common/bottom"></div>
<script src="../js/searchBykeyWord.js"></script>
<script th:inline="javascript">
    var errorMsg = document.getElementById("errorMsg1");
    errorMsg.style.display = 'block';
    setTimeout(function() {
        errorMsg.style.display = 'none';
    }, 1200);
    function add(itemId) {
        $.ajax({
            type: 'GET',
            url: '/user/addToCart?itemId=' + itemId,
            success: function (data) {
                console.log(data);
                var popLayer = document.getElementById("popLayer");
                popLayer.innerHTML = "<span class=\"cartMsg\">"+ data.message + "</span>"
                // popLayer.html("")
                // 设置定时关闭时间（1.2秒后关闭）
                setTimeout(function() {
                    popLayer.style.display = 'none';
                }, 1200);
                popLayer.style.display = "block";
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    };
</script>
</body>
</html>